<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/product_single.css"/>
		<link rel="stylesheet" type="text/css" href="css/single.css"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="css/content_bottem.css"/>
		<style>
/*body*/
			#one span,#two span,#three span,#four span,#b ul li a span,#c_ul02 li a span,#li_span,
			#p_03 span,#center_span span,#bottem_li01 a span,#bottem_li02 a span,#li_span01,
			#li_span05,#content_top_p_right span,#center_p span,
			#pimg_top_left span,#pimg_center_left span,#pimg_bottom_left span,#footer_right_center ul li span{
				background-image: url(img/img-sprite.png);
			}
/*header*/	
			#info{
				height: 257px;
				background: url(img/product.jpg) no-repeat;
				background-size: cover;
			}
			
/*content*/
			#content_top{margin-left: 50px;}
			#two_img{background: url(img/product1.jpg) no-repeat;}
			
			#img_01{background: url(img/be.jpg) no-repeat;}
			#img_02{background: url(img/be1.jpg) no-repeat;}
			#img_03{background: url(img/be2.jpg) no-repeat;}
			
			#left_img{background: url(img/pro.jpg) no-repeat;}
				
			#content_bottem{background: url(img/product2.jpg) no-repeat;background-size: cover;}			
/*footer*/
			#pimg_top_right{background: url(img/f1.jpg) no-repeat;}
			#pimg_center_right{background: url(img/f2.jpg) no-repeat;}
			#pimg_bottom_right{background: url(img/f3.jpg) no-repeat;}
		</style>
	</head>
	<body>
		<div id="container">
	<!--header-->
			<div id="header">
				<div id="header_top">
					<div id="header_top_left">
						<div id="one"><span></span>
							<a href="contact.html">Info@example.com</a>
						</div>
						<div id="two"><span></span>
							<a href="contact.html">04622616161</a>
						</div>
					</div>
					<div id="header_top_right">
						<div id="three"><span></span>
							<a href="login.html">Login</a>
						</div>
						<div id="four"><span></span>
							<a href="register.html">Create an Account</a>
						</div>
					</div>					
				</div>
				<div id="header_center">
					<div id="a">Amberegul</div>
					<div id="b">
						<ul>
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="single.html">Pages</a>
							</li>
							<li>
								<a href="single.html">Blog</a>
							</li>
							<li>
								<a href="product.html">Products</a>
							</li>
							<li>
								<a href="contact.html">Contact</a>
							</li>
							<li>
								<a href="checkout.html"><span></span></a>
							</li>
						</ul>
					</div>
					<div id="c">
						<ul id="c_ul01">
							<li><a href="checkout.html">$0.00(0 items)</a></li>
							<li><a href="checkout.html">Empty Cart</a></li>
						</ul>
						<ul id="c_ul02">
							<li><a href="checkout.html"><span></span></a></li>
						</ul>
					</div>
				</div>
				<div id="header_bottem">
					<div id="bottem_right">
						<ul>
							<li><a href="index.html">Home</a></li>
							<span id="li_span"></span>
							<li><a href="about.html">About</a></li>
						</ul>
					</div>
				</div>
				<div id="info">
					<div id="info_center">
						<p>LOREM IPSUM</p>
					</div>
				</div>
			</div>
	<!--content-->
			<div id="content">
				<div id="content_top">
					<div id="content_top_left">
						<div id="top_left_two">
							<span>CATEGORIES</span>
							<hr width="100%" size="1" />
							<div id="two_p">
								<p>Men</p>
								<p>Women</p>
								<p>Kids</p>
								<p>Accesories</p>
								<p>Shoes</p>
							</div>
							<div id="two_img">
								<div id="img_left">
									<span>LOREM IPSUM</span>
								</div>
								<div id="img_right">
									<ul>
										<li><a href="#">SHOP NOW</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div id="top_left_three">
							<span>TAGS</span>
							<hr width="100%" size="1" />
							<table border="0px" cellspacing="0px" cellpadding="0px">
								<tr>
									<td id="td_one">design</td>
									<td id="td_two">fashion</td>
									<td id="td_three">lorem</td>
									<td id="td_four">dress</td>
								</tr>
								<tr>
									<td id="td_one">fashion</td>
									<td id="td_two">dress</td>
									<td id="td_three">design</td>
									<td id="td_four">dress</td>
								</tr>
								<tr>
									<td id="td_one">design</td>
									<td id="td_two">fashion</td>
									<td id="td_three">lorem</td>
									<td id="td_four">dress</td>
								</tr>
							</table>
						</div>
						<div id="top_left_four">
							<span>BEST SELLERS</span>
							<hr width="100%" size="1" />
							<div id="left_img_p">
								<div id="img_p01">
									<div id="img_01"></div>
									<div id="p_01">
										<p>Lorem ipsum dolor</p>
										<p>sit amet consectetuer</p>
										<p id="p_color">$40.00</p>
									</div>
								</div>
								<div id="img_p02">
									<div id="img_02"></div>
									<div id="p_02">
										<p>Lorem ipsum dolor</p>
										<p>sit amet consectetuer</p>
										<p id="p_color">$40.00</p>
									</div>
								</div>
								<div id="img_p03">
									<div id="img_03"></div>
									<div id="p_03">
										<p>Lorem ipsum dolor</p>
										<p>sit amet consectetuer</p>
										<span></span><span></span><span></span><span></span><span></span>
										<p id="p_color"><s>$70.00</s>$40.00</p>
									</div>
								</div>
							</div>
							<div id="left_img">
								<div id="img_p">
									<p id="p01">DISCOUNT</p>
									<p id="p02">Up to</p>
									<p id="p03">60%</p>
								</div>	
							</div>
						</div>
					</div>
					<div id="content_top_right">
						<div id="content_top_right_top">
							<div id="content_top__img_left">
								<div id="img_left_big_img">
									<div id="show_img01">
										<a href="#"><img src="img/si1.jpg"/></a>
									</div>
									<div id="show_img02">
										<a href="#"><img src="img/si2.jpg"/></a>
									</div>
									<div id="show_img03">
										<a href="#"><img src="img/si.jpg"/></a>
									</div>
								</div>
								
								<div id="img_left_small_img">
									<ul id="img_ul01">
										<li id="img_li1"><img src="img/s2.jpg"/></li>
										<li id="img_li2"><img src="img/s3.jpg"/></li>
										<li id="img_li3"><img src="img/s1.jpg"/></li>
									</ul>
									<ul id="img_ul02">
										<li id="img_li01"></li>
										<li id="img_li02"></li>
										<li id="img_li03"></li>
									</ul>
								</div>
							</div>
							<div id="content_top_p_right">
								<h3>Lorem Ipsum</h3>
								<span></span><span></span><span></span><span></span><span></span>
								<p id="span_right">1 customer review</p>
								<p id="span_bottem">$95.00</p>
								<hr size="1" width="100%" color="#808080"/>
								<div id="ppp">
									<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam</p>
									<p>nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam</p>
									<p>erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci</p>
									<p>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo</p>
									<p>consequat.</p>
								</div>	
								<div id="p_select">
									<div id="p_select_p">
										<p>Color</p>
										<p>Size</p>
									</div>
									<div id="p_select_select">
										<select name="">
											<option value="">Silver</option>
											<option value="">White</option>
										</select>
										<select name="">
											<option value="">Large</option>
											<option value="">Small</option>
										</select>
									</div>	
								</div>								
								<hr size="1" width="100%" color="#808080"/>
								<p>TAG
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									:Women,
								</p>
								<p>SKU
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									:CK09
								</p>
								<hr size="1" width="100%" color="#808080"/>
								<a href="#">ADD TO CART</a>
							</div>
						</div>
						<div id="content_top_right_center">
							<div id="ul_li">
								<ul>
									<li id="ul_li01">Description</li>
									<li id="ul_li02">Addtional Informatioan</li>
									<li id="ul_li03">Reviews(1)</li>
								</ul>
							</div>							
							<div id="left_img_right_p">
								<div id="center_img">
									<img src="img/co.png"/>
								</div>
								<div id="center_p">
									<h3>Hendri</h3><p>-September 3,2014</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p>&nbsp;&nbsp;&nbsp;&nbsp;Wow nice!</p>
								</div>
								<a href="#">ADD REVIEW</a>
							</div>
						</div>
						<div id="content_top_right_bottem">
							<h3>RELETED PRODUCTS</h3>
							<hr width="100%" size="1" color="#000000" />
							<span id="show_top">
								<span id="top_left">
									<span id="top_img">
										<a href="#"><img src="img/pr.jpg"/></a>
									</span>
									<span id="center_span">
										<p>WOO JACKET #1</p>
										<span></span><span></span><span></span><span></span><span id="s_p"></span>
										$75.00											
									</span>
									<span id="bottem_ul">
										<ul>
											<li id="bottem_li01"><a href="#">ADD TOCART<span></span></a></li>
											<li id="bottem_li02"><a href="#"><span></span></a></li>
										</ul>
									</span>
								</span>
								<span id="top_center">
									<span id="top_img">
										<a href="#"><img src="img/pr1.jpg"/></a>
									</span>
									<span id="center_span">
										<p>WOO JACKET #1</p>
										<span></span><span></span><span></span><span></span><span id="s_p"></span>
										$75.00											
									</span>
									<span id="bottem_ul">
										<ul>
											<li id="bottem_li01"><a href="#">ADD TOCART<span></span></a></li>
											<li id="bottem_li02"><a href="#"><span></span></a></li>
										</ul>
									</span>
								</span>
								<span id="top_right">
									<span id="top_img">
										<a href="#"><img src="img/pr2.jpg"/></a>
									</span>
									<span id="center_span">
										<p>WOO JACKET #1</p>
										<span></span><span></span><span></span><span></span><span id="s_p"></span>
										$75.00											
									</span>
									<span id="bottem_ul">
										<ul>
											<li id="bottem_li01"><a href="#">ADD TOCART<span></span></a></li>
											<li id="bottem_li02"><a href="#"><span></span></a></li>
										</ul>
									</span>
								</span>
							</span>
						</div>
					</div>
				</div>
				<div id="content_bottem">
					<div id="big_border">
						<div id="small_border_p">
							<span>HAPPY SHOPING</span>
							<p>Lorem Ipsum sit amet consectuer adipiscing elit sed diam</p>
							<p>nonummy nibu euismod</p>
						</div>
					</div>
				</div>
			</div>
	<!--footer-->		
			<div id="footer">
				<div id="footer_content">
					<div id="footer_left">
						<p>QUICK CONTACT</p>
						<hr  width="100%" color="#000000" size="1"/><br />
						<ul id="ul01">
							<li></li>
							<li>ENTER YOUR EMAIL*</li>
							<li>ENTER YOUR PHONE</li>
						</ul>
						<ul id="ul02">
							<li>ENTER YOUR MESSAGE*</li>
						</ul>
						<ul id="ul03">
							<li><a href="#">SEND MESSAGE</a></li>
						</ul>
					</div>
					<div id="footer_center">
						<p>TOP RATED PRODUCTS</p>
						<hr  width="100%" color="#000000" size="1"/>
						<div id="center_pimg">
							<div id="pimg_top">
								<div id="pimg_top_left">
									<p id="p_top">Winter Combo Style</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p id="p_bottom"><s>$70.00</s>$40.00</p>
								</div>
								<div id="pimg_top_right">
									<ul><li></li></ul>
								</div>
							</div>
							<div id="pimg_center">
								<div id="pimg_center_left">
									<p id="p_top">Winter Combo Style</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p id="p_bottom"><s>$70.00</s>$40.00</p>
								</div>
								<div id="pimg_center_right">
									<ul><li></li></ul>
								</div>
							</div>
							<div id="pimg_bottom">
								<div id="pimg_bottom_left">
									<p id="p_top">Winter Combo Style</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p id="p_bottom"><s>$70.00</s>$40.00</p>
								</div>
								<div id="pimg_bottom_right">
									<ul><li></li></ul>
								</div>
							</div>
						</div>
					</div>
					<div id="footer_right">
						<div id="footer_right_top">
							<div id="right_top_img">
								 <img src="img/lo.png"/>
							</div>
							<div id="right_top_p">
								<h3>Amberegul Theme</h3>
								<p>Was designed for opencart,<br />
									magento,woocommerce and<br />
									prestashop platforms.It is<br />
									based on Bootstarp.
								</p>
							</div>
						</div>
						<div id="footer_right_center">
							<div id="center_auto">
								<p>Bandung,Indonesia</p>
								<p>40553</p>
								<ul>
									<li><span id="span1"></span>+62&nbsp;226759804</li>
									<li><span id="span2"></span>blithemes</li>
									<li><span id="span3"></span>info@example.com</li>
									<li><span id="span4"></span>http://example.com</li>
								</ul>
							</div>
						</div>
						<div id="footer_rigth_bottem">
							<div id="bottem_auto">
								<img src="img/pa.png"/>
							</div>
						</div>
					</div>
					<hr width="100%" size="1" color="#000000"/>
					<p align="center">Copyright&nbsp;&copy;&nbsp;2015 Company name All rights reserved.</p>
				</div>
			</div>
			
		</div>
		
		<script type="text/javascript">
	
			var div = document.getElementById('img_left_big_img').getElementsByTagName('div');
			div[1].style.display = 'block';			
			var lis = document.getElementById('img_ul02').getElementsByTagName('li');
			lis[1].style.display = 'none';
			//点击第一张图片
			lis[0].onclick=function(){
				for(var i = 0; i < div.length; i++){
					div[i].style.display = 'none';
					lis[i].style.display = 'block';
				} 
				div[0].style.display = 'block';
				lis[0].style.display = 'none';
			}
			//点击第二张图片
			lis[1].onclick=function(){
				for(var i = 0; i < div.length; i++){
					div[i].style.display = 'none';
					lis[i].style.display = 'block';
				}
				div[1].style.display = 'block';
				lis[1].style.display = 'none';
			}
			//点击第三张图片
			lis[2].onclick=function(){
				for(var i = 0; i < div.length; i++){
					div[i].style.display = 'none';
					lis[i].style.display = 'block';
				} 
				div[2].style.display = 'block';
				lis[2].style.display = 'none';
			}				
		</script>
	</body>
</html>
